<template>
  <div class="store-container">
    <div class="store-sign yh-layout-box" v-if="signBoard">
      <img :src="URL.PIC+signBoard" width="100%" height="108">
    </div>
    <NavList index="index" v-if="info && goodsClassify" :factoryId="info.id" :classify="goodsClassify" />
    <div class="store-swiperBanner" v-if="banners && banners.length > 0">
      <Carousel :banners="banners" />
    </div>

    <Xlist />

    <div class="store-tempContent yh-layout-box">
      <div class="store-hot-recommend" v-if="sellWell && sellWell.length > 0">
        <div class="store-title">HOT  RECOMMEND</div>
        <div class="store-middle-line"></div>
        <div class="store-header-item">
          <span class="store-bg"><img src="../../../assets/images/factory/store_02.png"></span>
          <span class="store-category">热销推荐</span>
          <span class="store-bg"><img src="../../../assets/images/factory/store_01.png"></span>
        </div>
        <div class="store-hot-con">
          <div class="store-hot-ul">
            <div class="store-hotPD-li cursor" v-for="(item, idx) in sellWell" @click="routeToPath('/product/'+item.productId, 'new')">
              <img class="hotPD-img" :src="URL.PIC+item.mainImgPath">
              <p class="hotPD-info">
                {{ item.title }}
              </p>
              <div class="hotPD-price">￥{{ item.specification.sellingPrice }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="classifyCustom && classifyCustom.length > 0">
        <div class="store-decorate-item" v-for="(i, index) in classifyCustom">
          <div class="store-middle-line"></div>
          <div class="store-header-item">
            <span class="store-bg"><img src="../../../assets/images/factory/store_02.png"></span>
            <span class="store-category">{{ i.classifyName }}</span>
            <span class="store-bg"><img src="../../../assets/images/factory/store_01.png"></span>
          </div>
          <div class="store-decorate-pd">
            <div class="store-pd-ul">
              <div class="store-pd-li cursor" v-for="good in i.goods" @click="routeToPath('/product/'+good.productId, 'new')">
                <img class="pd-img" :src="URL.PIC+good.productImage">
                <div class="pd-price">￥{{ good.specification.sellingPrice }}</div>
                <p class="pd-info">
                  {{ good.productTitle }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import NavList from '../components/NavList'
import { getFactoryPromotion, getFactoryClassifyCustom, getFactoryProducts, getFactoryBannerSelect, getFactorySignBoard } from '@/api/factory'
import Carousel from '../components/Carousel'
import Xlist from '../components/Xlist'
export default {
  props: ['info', 'goodsClassify'],
  components: {
    NavList,
    Carousel,
    Xlist,
  },
  data() {
    return {
      factoryId: this.$route.params.factoryId,
      sellWell: null,
      classifyCustom: [],
      classifyGoods: [],
      banners: null,
      signBoard: null,
    }
  },
  created() {
    this.getFactoryPromotion()
    this.getFactorySignBoard()
    this.getFactoryBannerSelect()
    this.getFactoryClassifyCustom()
  },
  methods: {
    // 店招
    getFactorySignBoard() {
      getFactorySignBoard({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
        this.signBoard = res.data;
      })
    },
    // BANNER
    getFactoryBannerSelect() {
      getFactoryBannerSelect({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
        this.banners = res.data;
      })
    },
    // 热销商品
    getFactoryPromotion() {
      getFactoryPromotion({factoryId: this.factoryId, positionCode: 'HOTS'}).then(res=>{
        this.sellWell = res.data;
      })
    },
    // 品类
    getFactoryClassifyCustom() {
      getFactoryClassifyCustom({factoryId: this.factoryId}).then(res=>{
        this.getFactoryProducts(res.data)

      })
    },
    // 品类商品
    getFactoryProducts(classifyCustom) {
      for (var idx in classifyCustom) {
        getFactoryProducts({factoryId: this.factoryId,
          classifyId: classifyCustom[idx].classifyId,
          size: 100,
          page: 1,
          sort: 'desc',
        }).then(res=>{
          this.classifyGoods.push(res.data.list)
          setTimeout(()=>{
            this.ProductsList(classifyCustom, this.classifyGoods)
          }, 5)
        })
      }
    },
    // 把品类和商品放在一个数组里面
    ProductsList(classifyCustom, classifyGoods) {
      for (var idx in classifyCustom) {
        classifyCustom[idx].goods = classifyGoods[idx]
      }
      this.classifyCustom = classifyCustom
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/template.scss';
</style>
